<template>
	<div class="tool-title-box">
		<h3>多选框设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">标签名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入标签名称" clearable v-model="activeComponent.data.labelValue"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">属性名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入属性名称" clearable v-model="activeComponent.data.name"></el-input>
				</div>
			</div>
			<div class="item-box">
				<el-table :data="activeComponent.data.options" class="w100">
					<el-table-column prop="index" label="操作" width="50px" align="center">
						<template #header>
							<el-button type="primary" icon="el-icon-plus" circle plain size="mini" @click="onAddRow()"></el-button>
						</template>
						<template #default="scope">
							<el-button type="danger" icon="el-icon-delete" circle plain size="mini" @click="onDelRow(scope.$index)"></el-button>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="选项名" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.name" class="item-edit-input"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="value" label="选项值" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.value" class="item-edit-input"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="checked" label="选中" width="70px" align="center">
						<template #default="scope">
							<el-switch v-model="scope.row.checked"/>
						</template>
					</el-table-column>
					<el-table-column prop="disabled" label="禁用" width="70px" align="center">
						<template #default="scope">
							<el-switch v-model="scope.row.disabled"/>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<div class="item-box">
				<div class="title">组件大小</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.size" placeholder="请选择">
						<el-option label="large" value="large"></el-option>
						<el-option label="medium" value="medium"></el-option>
						<el-option label="small" value="small"></el-option>
						<el-option label="mini" value="mini"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标签宽度</div>
				<div class="modify-box">
					<el-input-number :min="1" :max="24" v-model="activeComponent.data.labelWidth"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">最多可选值</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.max" :min="0" placeholder="max"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">最少可选值</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.min" :min="0" placeholder="min"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否必填</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.required" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否禁用</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.disabled" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<!-- <div class="item-box">
				<div class="title">字体颜色</div>
				<div class="info">{{activeComponent.data.textColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.textColor = '#ffffff'">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.textColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
			<div class="item-box">
				<div class="title">背景颜色</div>
				<div class="info">{{activeComponent.data.fill}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.fill = '#409EFF'">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.fill"></el-color-picker>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	
	export default {
		name: 'checkbox-tool',
		components: { },
		setup() {
			const store = useStore();
			const state = reactive({
				
			})
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			// 新增行
			const onAddRow = () => {
				state.activeComponent.data.options.push({
					value: '',
					name: '',
					checked: false,
					disabled: false,
				})
			};
			// 删除行
			const onDelRow = (k) => {
				state.activeComponent.data.options.splice(k, 1);
			};
			
			return {
				onAddRow,
				onDelRow,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>